<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="KAZUKI">
	<meta name="copyright" content="KAZUKI">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,maximum-scale=1,minimum-scale=1">
	<title></title>
	<!--<link rel="stylesheet" href="css/font-awesome.min.css">-->
	<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
	<!--<link rel="stylesheet" href="css/base.css">-->
	<!--<link rel="stylesheet" href="css/index.css">-->
	<!--<link rel="stylesheet" href="css/others.css">-->
	<!--<link rel="stylesheet" href="css/media.css">-->
	<style>
		*{
			margin:0;
			padding:0;
			box-sizing:border-box;
		}
		#cvs{
			vertical-align: middle;
		}
	</style>
</head>
<body>
<div class="body1">
<div class="body2">
	<canvas id="cvs"></canvas>
</div>
</div>
<!-- <a href="#" class="return">TOP</a> -->

<!-- <script src="js/jquery-3.0.0.min.js"></script> -->
<!-- <script src="js/bootstrap.min.js"></script> -->
<!-- <script src="js/angular.min.js"></script> -->
<!-- <script src="js/common.js"></script> -->
<!-- <script src="js/index.js"></script> -->
<script>
	var cvs=document.getElementById('cvs');
	var docW=document.documentElement.clientWidth;
	var docH=document.documentElement.clientHeight;
	cvs.width=docW;
	cvs.height=docH;

	var ctx=cvs.getContext&&cvs.getContext("2d");

	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(docW,0);
	ctx.moveTo(0,0);
	ctx.lineTo(0,docH);

	for(var i=0;i<docW;i++){
		if(i%20==0&&i!=0){
			ctx.moveTo(i,0);
			ctx.lineTo(i,5);
			ctx.fillText(i,i-5,i%40+20);
		}
	}
	for(var i=0;i<docH;i++){
		if(i%20==0&&i!=0){
			ctx.moveTo(0,i);
			ctx.lineTo(5,i);
			ctx.fillText(i,10,i+5)
		}
	}

	ctx.strokeStyle="black";
	ctx.stroke();

    ctx.font=docW/10+"px Arial";
    var measureText=docW/2-ctx.measureText("宽度:"+docW).width/2;
    ctx.fillText("宽度:"+docW,measureText,docH/3);
    ctx.fillText("高度:"+docH,measureText,docH/1.5)
</script>
</body>
</html>